type LogoProps = {
  width: number;
  height: number;
  color: string;
};

const Logo = ({ width, height, color }: LogoProps) => {
  const enableBackground = `new 0 0 ${width} ${height}`;
  return (
    <svg
      version="1.1"
      id="httpcat_logo"
      xmlns="http://www.w3.org/2000/svg"
      x="0px"
      y="0px"
      width={width + 'px'}
      height={height + 'px'}
      viewBox={`0 0 ${width} ${height}`}
      // @ts-ignore
      style={{ enableBackground: `new 0 0 ${width} ${height}` }}
    >
      <path
        fill={color}
        d="M78.6,27.4H62.8V1.5c0-0.7-0.6-1.3-1.2-1.4c-0.6-0.2-1.4,0.1-1.8,0.6l-9.3,14.2H30L20.1,0.6c-0.4-0.5-1-0.8-1.6-0.6
      c-0.6,0.2-0.9,0.8-0.9,1.4v25.9H1.4c-0.8,0-1.4,0.7-1.4,1.5c0,0.8,0.6,1.5,1.4,1.5h16.1v3.8l-9.8,0.2c0,0,0,0,0,0
      c-0.8,0-1.4,0.5-1.4,1.3c0,0.8,0.6,1.4,1.4,1.4l9.8,0v4.1c0,7.7,9.9,13.8,22.6,13.8s22.6-6.1,22.6-13.8v-4.1l9.4-0.2c0,0,0,0,0,0
      c0.8,0,1.4-0.5,1.4-1.3c0-0.8-0.6-1.4-1.4-1.4l-9.5,0v-3.8h15.8c0.8,0,1.4-0.7,1.4-1.5C80,28.1,79.4,27.4,78.6,27.4z M20.6,6.3
      l7.5,11c0.3,0.4,0.6,0.6,1.1,0.6h22.1c0.5,0,1.1-0.3,1.4-0.7l7.1-10.7v20.8H48.3c-0.4,0-0.8,0.1-1,0.4L40,35.5l-7.8-7.7
      c-0.3-0.3-0.6-0.4-1-0.4H20.6V6.3z M59.8,34.3l-7.4,0.2c0,0,0,0,0,0c-0.8,0-1.4,0.5-1.4,1.3c0,0.8,0.6,1.4,1.4,1.4l7.4,0v4.1
      c0,5.9-9,10.8-19.6,10.8S20.6,47,20.6,41.2v-4.1l7.1-0.2c0,0,0,0,0,0c0.8,0,1.4-0.5,1.4-1.3c0-0.8-0.6-1.4-1.4-1.4l-7.1,0v-3.8h10.1
      l8.4,8.2c0.3,0.3,0.6,0.3,1,0.3c0,0,0,0,0,0c0.4,0,0.8-0.1,1-0.3l7.9-8.2h10.9V34.3z"
      />
    </svg>
  );
};

export default Logo;
